<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <img src="./小图标2.png" alt=""> -->
      <!-- <img v-bind:src="url" alt="" @click="change"> -->
      <!-- <div v-bind="{id:'aaa','myAttr':'hello'}"></div> -->

      <div :class="isClass"></div>
      <div :class="{red:isRed,gree:isGree}"></div>
      <div :class="[classA,classB]"></div>
      <div :class="[classA,{classB:isB,classC:isC}]"></div> 

      <!-- <div style="width:100px;height:100px;background:red;"}></div>  -->

       <div :style="{width:sWidth,height:sHeight,background:sColor}"></div>

		<div :style="{width:aWidth + 'px',height:aHeight + 'px', background:aColor}"></div>
	

    </div>
    <script src="vue.js"></script>
    <script>
      /*
		
		10、v-bind:给元素或者组件动态绑定一个或者多个属性
			语法： v-bind:属性名=值
				简写：：属性名=值

			关于this:this是当前vue的实力，在组件中this指向当前组件	

		v-bind:class
			<div :class="isClass"></div>绑定字符串
			<div :class="{red:isRed}"></div>绑定对象, red为key是类、isRed是布尔值，这个布尔值决定
			<div :class="{classA},{classB}"></div>绑定数组 数组中的每一项都是类名需要在data中初始化
			<div :class="[classA,{classB:isB,classC:isC}]"></div>

		v-bind:style 动态绑定样式
		*/


      var vm = new Vue({
        el: '#app',
        data: {
          url: './小图标2.png',
          isClass:'box box1 box2',
          isRed:true,
          isGree:false,
          classA:"box1",
          classB:'box2',
          isB:'1',
          isC:'2',
          sWidth: '200px',
          sHeight: '200px',
          sColor: 'green',
          aWidth: '200',
          aHeight: '200',
          aColor: 'black'
        },
        methods: {
          change: function() {
            if (this.url == './小图标2.png') {
              this.url = './小图标3.png';
            } else {
              this.url = './小图标2.png';
            }
          }
        }
      });
    </script>
  </body>
</html>
